<template>
  <b-col v-if="result.numPages != 0">
    <b-row v-for="r in result.result" :key="r.media_id" class="px-2">
      <!-- 封面图 -->
      <b-col class="col-md-auto">
        <b-img-lazy class="rounded-lg shadow-sm border" height="200px" width="134px" center
          blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp" :src="'https://images.weserv.nl/?url='+r.cover" />
      </b-col>
      <!-- 信息 -->
      <b-col class="pl-1">
        <!-- 标题和评分 -->
        <b-row>
          <b-col>
            <h5 style="font-family:HYZhengYuan-85S">{{getTitle(r.title)}}</h5>
          </b-col>
          <b-col class="col-auto" align-self="end">
            <span v-if="r.media_score.score == 0">暂无评分</span>
            <span v-else class="iconfont icon-favorite-filling" style="font-size:26px;color:orange">{{r.media_score.score}}</span>
          </b-col>
        </b-row>
        <!-- 集数 -->
        <b-row>
          <b-col>
            {{r.styles}} · {{r.index_show == ''?'敬请期待':r.index_show}}
          </b-col>
        </b-row>
        <!-- 简介 -->
        <b-row class="mt-3" style="height:60px">
          <b-col class="content text-muted overflow-hidden">
            {{r.desc}}
          </b-col>
        </b-row>
        <!-- 按钮 -->
        <b-row align-h="start" style="height:77px">
          <b-col class="col-auto pt-4">
            <b-btn @click="toDetail(r.media_id)" variant="primary">查看详情</b-btn>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="result.numResults >20">
      {{result.page}}
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="'SearchResult?text='+this.$route.query.text+'&page='" :value="result.page"
          align="center" size="md" :number-of-pages="result.numPages" />
      </b-col>
    </b-row>
  </b-col>
  <b-col v-else class="text-center mt-3">
    <b-spinner md /> 加载中
  </b-col>
</template>
<script>
export default {
  props: {
    text: String,
  },
  data() {
    return {
      result: {
        numPages: 0
      },
      timeOut: false,
    }
  },
  created() {
    this.search(this.text, this.$route.query.page);
  },
  methods: {
    // 获取搜索结果
    search(text, page) {
      this.$httpBangumi.bangumiSearch(text, page).then((res) => {
        // console.log(res);
        this.result = res;
      }).catch((err) => {
        if (err == "timeOut") {
          this.timeOut = true;
        }
      });
    },
    //转换标题
    getTitle(title) {
      for (let i = 0; i < 5; i++) {
        title = title.replace('<em class="keyword">', '');
        title = title.replace('</em>', '');
      }
      return title
    },
    //详情页
    toDetail(id) {
      this.$pageRedirect.toAnimationDetails(id, "media_id");
    }
  },
}
</script>
<style scoped>
</style>
